<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { NIcon, NBreadcrumb, NBreadcrumbItem, NAvatar, NBadge, NPopover, NSpace, NButton, NDrawer, NDivider, NDrawerContent, useDialog, useNotification } from 'naive-ui'
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, LockOutlined, LogoutOutlined, CheckOutlined, FullscreenExitOutlined, FullscreenOutlined, SettingOutlined, BellOutlined } from '@vicons/antd'
import Logo from '@/components/icons/Logo.vue'

import { useMenuStore } from '@/stores/menuStore'
import { useUserStore } from '@/stores/userStore'
import { useConfigStore } from '@/stores/configStore'
import http from '@/tools/http'

const menuStore = useMenuStore()
const userStore = useUserStore()
const configStore = useConfigStore()
const router = useRouter()
const dialog = useDialog()
const notification = useNotification()

const props = defineProps(['collapsed'])

const emit = defineEmits(["update:collapsed"]);

const panelConfigVisiable = ref<boolean>(false)
const fullscreenFlag = ref<boolean>(false)

function updateCollapsed(flag: boolean) {
    emit('update:collapsed', flag)
}

function openFullscreen() {
    if (document.body.requestFullscreen) {
        document.body.requestFullscreen()
        fullscreenFlag.value = true
    } else {
        notification.error({
            content: '全屏失败，当前浏览器不支持全屏',
            meta: '全屏失败，当前浏览器不支持全屏',
            duration: 2500,
            keepAliveOnHover: true
        })
    }
}

function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
        fullscreenFlag.value = false
    } else {
        notification.error({
            content: '全屏失败，当前浏览器不支持全屏',
            meta: '全屏失败，当前浏览器不支持全屏',
            duration: 2500,
            keepAliveOnHover: true
        })
    }
}

function toHome() {
    router.push({ name: 'home' })
}

function logout() {
    dialog.create({
        title: '温馨提示',
        content: '是否确认退出系统',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            const request = {
                account: userStore.account
            }
            http.post("/auth/logout", request).then(({ data }) => {
                if (data.code === "0") {
                    userStore.clear()
                    menuStore.clear()
                    router.push({ name: 'login' })
                }
            })
        }
    })
}
</script>

<template>
    <div class="home-header">
        <div class="home-header-left">
            <div v-if="configStore.getPanelMode() === '0'" class="home-info" @click="toHome()">
                <div class="icon">
                    <logo size="28" />
                </div>
                <div v-if="!props.collapsed" class="title">
                    Flame Admin
                </div>
            </div>
            <div class="icon" @click="props.collapsed ? updateCollapsed(false) : updateCollapsed(true)">
                <n-icon v-if="!props.collapsed" size="24" color="var(--n-text-color)">
                    <menu-fold-outlined />
                </n-icon>
                <n-icon v-if="props.collapsed" size="24" color="var(--n-text-color)">
                    <menu-unfold-outlined />
                </n-icon>
            </div>
            <div class="breadcrumb">
                <n-breadcrumb>
                    <n-breadcrumb-item v-for="(item, index) in menuStore.breadcrumbList" :key="index"
                        :clickable="false">
                        <span class="breadcrumb-item">{{ menuStore.menuName(item) }}</span>
                        <template #separator>
                            <span class="breadcrumb-item">/</span>
                        </template>
                    </n-breadcrumb-item>
                </n-breadcrumb>
            </div>
        </div>
        <div class="home-header-right">
            <div class="icon" @click="fullscreenFlag ? closeFullscreen() : openFullscreen()">
                <n-icon v-if="!fullscreenFlag" size="24" color="var(--n-text-color)">
                    <fullscreen-outlined />
                </n-icon>
                <n-icon v-if="fullscreenFlag" size="24" color="var(--n-text-color)">
                    <fullscreen-exit-outlined />
                </n-icon>
            </div>
            <div class="icon" @click="router.push({ name: 'user-message' })">
                <n-badge :value="userStore.userMessageCount" :max="99">
                    <n-icon size="24" color="var(--n-text-color)">
                        <bell-outlined />
                    </n-icon>
                </n-badge>
            </div>
            <n-popover style="width: 180px;padding: 0;" :content-style="{ padding: 0 }" trigger="click">
                <template #trigger>
                    <div class="user">
                        <div class="username">
                            {{ userStore.userName }}
                        </div>
                        <div class="avatar">
                            <n-avatar v-if="userStore.userDetails.userAvatar !== ''" :src="userStore.userDetails.userAvatar" />
                            <n-avatar v-if="userStore.userDetails.userAvatar === ''"
                                :style="{ color: configStore.getThemeColor(), backgroundColor: '#efefef', fontWeight: 'bolder' }">
                                {{ userStore.userName.substring(0, 1) }}
                            </n-avatar>
                        </div>
                    </div>
                </template>
                <n-button style="width:100%;height:36px;" quaternary @click="router.push({ name: 'user-info' })">
                    <template #icon>
                        <n-icon>
                            <user-outlined />
                        </n-icon>
                    </template>
                    个人信息
                </n-button>
                <n-button style="width:100%;height:36px;" quaternary @click="router.push({ name: 'revise-pwd' })">
                    <template #icon>
                        <n-icon>
                            <lock-outlined />
                        </n-icon>
                    </template>
                    密码修改
                </n-button>
                <n-button style="width:100%;height:36px;" quaternary @click="logout">
                    <template #icon>
                        <n-icon>
                            <logout-outlined />
                        </n-icon>
                    </template>
                    退出系统
                </n-button>
            </n-popover>
            <div class="icon" @click="panelConfigVisiable = !panelConfigVisiable">
                <n-icon size="24" color="var(--n-text-color)">
                    <setting-outlined />
                </n-icon>
            </div>
        </div>
    </div>
    <n-drawer v-model:show="panelConfigVisiable" width="400px">
        <n-drawer-content title="面板配置" :closable="true" :header-style="{ fontWeight: 'bold' }">
            <n-divider>主题模式</n-divider>
            <n-space>
                <n-button @click="configStore.defaultTheme()">浅色</n-button>
                <n-button @click="configStore.darkTheme()">深色</n-button>
            </n-space>
            <n-divider>布局模式</n-divider>
            <n-space>
                <div @click="configStore.setPanelMode('0')"
                    :class="['panel', { 'selected': configStore.getPanelMode() === '0' }]">
                    <div
                        style="position: absolute;top: -1px;left: -1px;right: 0;height: 25%;background-color: rgb(24, 24, 28);">
                    </div>
                    <div style="position: absolute;top: 25%;left: -1px;bottom: 0;width: 33%;background-color: #ffffff;">
                    </div>
                </div>
                <div @click="configStore.setPanelMode('1')"
                    :class="['panel', { 'selected': configStore.getPanelMode() === '1' }]">
                    <div
                        style="position: absolute;top: -1px;left: -1px;bottom: 0;width: 33%;background-color: rgb(24, 24, 28);">
                    </div>
                    <div style="position: absolute;top: 0;left: 33%;right: 0;height: 25%;background-color: #ffffff;">
                    </div>
                </div>
            </n-space>
            <n-divider>主题色</n-divider>
            <n-space justify="space-between">
                <div @click="configStore.setThemeColor('rgb(24, 144, 255)')" class="theme-color"
                    style="background-color:rgb(24, 144, 255)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(24, 144, 255)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(245, 34, 45)')" class="theme-color"
                    style="background-color:rgb(245, 34, 45)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(245, 34, 45)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(250, 84, 28)')" class="theme-color"
                    style="background-color:rgb(250, 84, 28)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(250, 84, 28)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(250, 173, 20)')" class="theme-color"
                    style="background-color:rgb(250, 173, 20)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(250, 173, 20)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(19, 194, 194)')" class="theme-color"
                    style="background-color:rgb(19, 194, 194)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(19, 194, 194)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(82, 196, 26)')" class="theme-color"
                    style="background-color:rgb(82, 196, 26)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(82, 196, 26)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(47, 84, 235)')" class="theme-color"
                    style="background-color:rgb(47, 84, 235)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(47, 84, 235)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
                <div @click="configStore.setThemeColor('rgb(114, 46, 209)')" class="theme-color"
                    style="background-color:rgb(114, 46, 209)">
                    <n-icon v-if="configStore.getThemeColor() === 'rgb(114, 46, 209)'" :size="14">
                        <check-outlined />
                    </n-icon>
                </div>
            </n-space>
            <n-button type="primary" @click="configStore.reset()" style="width:100%;margin-top:24px;">重置</n-button>
        </n-drawer-content>
    </n-drawer>
</template>

<style scoped>
.home-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 48px;
}

.home-header .icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

.home-header .icon:hover {
    cursor: pointer;
    background-color: var(--flame-icon-background-color);
}

.home-header .home-header-left {
    display: flex;
    height: 48px;
}


.home-header .home-header-left .home-info {
    display: flex;
    height: 48px;
}

.home-header .home-header-left .home-info:hover {
    cursor: pointer;
}

.home-header .home-header-left .home-info .title {
    width: 160px;
    height: 48px;
    font-weight: 600;
    font-size: 18px;
    line-height: 52px;
}

.home-header .home-header-left .breadcrumb {
    display: flex;
    align-items: center;
}

.home-header .home-header-left .breadcrumb .breadcrumb-item {
    color: var(--n-text-color);
}

.home-header .home-header-right {
    display: flex;
}

.home-header .home-header-right .user {
    display: flex;
}

.home-header .home-header-right .user:hover {
    cursor: pointer;
}

.home-header .home-header-right .user .username {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.home-header .home-header-right .user .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
}

.panel {
    position: relative;
    width: 56px;
    height: 48px;
    background-color: #eef0f6;
    border: 2px solid var(--n-color);
    box-shadow: 0 0px 2.5px 0 rgb(0 0 0 / 18%);
}

.panel:hover {
    cursor: pointer;
    border: 2px solid var(--n-resize-trigger-color-hover);
}

.selected {
    border: 2px solid var(--n-resize-trigger-color-hover);
}

.theme-color {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff
}

.theme-color:hover {
    cursor: pointer;
}
</style>